<template>
	<view class="trendsScoreDetail">
		<view class="item-title flex alignCenter">
			<view class="left">
				<image :src="item.logo"></image>
			</view>
			<!-- 右侧数据 -->
			<view class="right flex alignCenter">
				<view>
					<view class="title font12 flex alignCenter flexWrap">
						<view class="font16 bold schoolName">{{item.schoolName}}</view>
						<view class="detail font12 flex alignCenter" @click.stop="handleSchoolDetail(item)"> <text
								class="hiddenOneline collegeName">{{item.collegeName}}</text> <uni-icons type="forward" size="12"
								color="#333"></uni-icons> </view>
						<view class="hot-num font12 bold flex alignCenter">
							<image src="@/static/image/index/hot.png"></image>{{item.hot||110}}
						</view>
					</view>
					<view class="normal-title font14 bold">{{ item.majorCode + '' + item.majorName }}</view>
				</view>
			</view>
		</view>

		<view class="tips font12">请结合历年报录比和当年热度综合评判</view>

		<view class="contents">
			<!-- 总的分数段 -->
			<view class="content-item">
				<view class="title font14 bold">总的分数段</view>
				<view class="echarts" style="width: 100%;height: 600rpx;">
					<qiun-data-charts type="line" :opts="opts1" :chartData="chartData" />
				</view>
			</view>
			<!-- 单科建议分数段 -->
			<view class="content-item">
				<view class="title font14 bold">单科建议分数段</view>
				<view class="echarts w-100" style="height: 600rpx;">
					<qiun-data-charts type="line" :opts="opts2" :chartData="chartData1" />
				</view>
			</view>
			<view class="content-item">
				<!-- 历年报录比 -->
				<view class="title font14 bold">历年报录比</view>
				<view class="echarts">
					<wyb-table ref="table" :headers="headers" :contents="tableData" width="100%" />
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="popup" mode="center">
			<view class="popup-value">
				<view class="delta"></view>
				<view class="content">
					<image src="../static/dianji.png" mode=""></image>
					<text class="text">点击小圆点，可看到具体的数值。</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getblb
	} from "@/api/toolbox.js"
	import wybTable from '@/pages/toolbox/components/wyb-table/wyb-table.vue'
	import qiunDataCharts from '@/pages/toolbox/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';

	export default {
		components: {
			wybTable,
			qiunDataCharts
		},
		data() {
			return {
				opts2:{},
				opts1:{},
				chartData1: {},
				chartData: {},
				opts: {
					color: ["#FF0000", "#00b1f2", "#7def86", "#F59A23", "#FFFF00", 'rgb(213, 22, 98)', 'rgb(92, 110, 183)'],
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: true, //是否显示数据点的图形标识
					dataPointShapeType: 'hollow', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
					enableScroll: false,
					legend: {
						show: false,
						position: 'top',
						fontSize: '11',
						fontColor: '#333',
						float: 'center',
					},
					xAxis: {
						disableGrid: true,
						marginTop: 2,
						lineHeight: '30',
						calibration: true, //坐标轴刻度线
						fontColor: '#333',
						fontSize: 11,
						rotateLabel: false, //【旋转】数据点（刻度点）文字
						rotateAngle: 0, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
					},
					yAxis: {
						gridType: "dash", //solid，dash
						dashLength: 2,
						splitNumber: 4,
						data: [{
							min: 0,
							max: 800,
							fontSize: 11,
							fontColor: '#333',
							calibration: true,
						}]
					},
					extra: {
						line: {
							type: 'straight',
							width: 2,
							activeType: 'hollow',
							linearType: 'none',
							activeBgColor: "#333",
							activeBgOpacity: 0.08,
							seriesGap: 3,
							barBorderCircle: true,
						},
					}
				},
				item: {},
				popup: false,
				seriesData1Max: '',
				seriesData2Max: '',
				categories1: ['平均分', '最低分', '最高分', '最低估分', '最高估分'],
				seriesData1: [{
					name: "",
					linearColor: [

						[
							0,
							"#1890FF"
						],
						[
							0.25,
							"#00B5FF"
						],
						[
							0.5,
							"#00D1ED"
						],
						[
							0.75,
							"#00E6BB"
						],
						[
							1,
							"#90F489"
						],
					],
					// setShadow: [],
					data: []
				}],
				categories2: ["政治", "英语", "专一", "专二"],
				seriesData2: [{
					name: "",
					data: []
				}],
				headers: [],
				tableData: [],
			}
		},
		onLoad(options) {
			this.item = JSON.parse(options.items);
			this.handleCharts1();
			this.handleCharts2();
			this.getData();
		},
		methods: {
			//图表一显示
			handleCharts1() {
				this.seriesData1[0].data = this.item.lastAdmissionScoreRange ? this.item.lastAdmissionScoreRange.split(/\s+/g) :
					[];
				this.seriesData1[0].data.push(this.item.guessLowScore);
				this.seriesData1[0].data.push(this.item.guessHighScorer);
				this.seriesData1Max = Math.max(...(this.seriesData1[0].data)) + 100;
				let opts1 = JSON.parse(JSON.stringify(this.opts));
				opts1.yAxis.data[0].max = this.seriesData1Max;
				opts1.extra.linearType = 'custom';
				opts1.extra.line.type = 'curve';
				opts1.extra.line.width = 3;
				opts1.yAxis.splitNumber = 4;
				this.opts1 = opts1;
				let res = {
					categories: this.categories1,
					series: this.seriesData1
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			//图表二显示
			handleCharts2() {
				this.seriesData2[0].data = [this.item.recommendPolitics, this.item.recommendEnglish, this.item.recommendMajor1,
					this.item.recommendMajor2
				];
				this.seriesData2Max = Math.max(...(this.seriesData2[0].data)) + 100;
				let opts2 = JSON.parse(JSON.stringify(this.opts));
				opts2.yAxis.data[0].max = this.seriesData2Max;
				opts2.extra.linearType = 'custom';
				opts2.extra.line.type = 'curve';
				opts2.extra.line.width = 3;
				opts2.yAxis.splitNumber = 4;
				this.opts2 = opts2;
				let res1 = {
					categories: this.categories2,
					series: this.seriesData2
				}
				this.chartData1 = JSON.parse(JSON.stringify(res1));
			},
			getData() {
				getblb({
					majors: [{
						majorCode: this.item.majorCode,
						schoolCode: this.item.schoolCode,
						collegeCode: this.item.collegeCode,
					}]
				}).then(res => {
					this.headers = [{
						label: '年份',
						key: 'title',
						width: 160
					}, ];
					// 表格数据处理
					let arrData = [{
							title: '招生数'
						},
						{
							title: '录取数（含专项计划和定向）'
						},
						{
							title: '保研数'
						},
						{
							title: '调剂数'
						},
						{
							title: '第一志愿'
						},
						{
							title: '外校调剂来源'
						},
					];
					res.data.forEach((item) => {
						this.headers.push({
							label: item.year,
							key: item.year,
							width: 130
						});
						arrData[0][item.year] = item.enrollStudentNumber;
						arrData[1][item.year] = item.enrollNumber;
						arrData[2][item.year] = item.recommendNumber;
						arrData[3][item.year] = item.adjustNumber;
						arrData[4][item.year] = item.applyNumber;
						arrData[5][item.year] = item.adjustSource;
					});
					this.tableData = arrData;


					/* 
					 let res = {
					     categories: this.categories,
					     series: this.seriesData
					   };
					 	
					 this.chartData = JSON.parse(JSON.stringify(res));
					 */
				})
			},

			// 查看学校详情
			handleSchoolDetail(item) {
				uni.navigateTo({
					url: `/pages/toolbox/chooseMajor/school/schoolDetail?schoolCode=${item.schoolCode}&title=${item.schoolName}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.trendsScoreDetail {
		background: #f2f2f2;
		width: 100%;
		height: 100%;
		padding-bottom: 40rpx;

		.item-title {
			padding: 32rpx;

			.left {
				background: red;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.right {
				margin-left: 40rpx;
				width: 100%;
				justify-content: space-between;

				.title {
					color: #333333;

					.schoolName {
						margin-right: 10rpx;
					}

					.collegeName {
						max-width: 400rpx;
					}
				}

				.normal-title {
					margin: 4rpx 0;
				}

				.detail {
					// background: #F7DD5E;
					border-radius: 4rpx;
					// padding: 2rpx 20rpx;
					color: #333;
				}

				// .hot{
				// background: #FF594C;
				// text-align: center;
				// color: #fff;
				// padding: 10rpx;
				// border-radius: 8rpx;
				// view{
				// 	line-height: 1em;
				// }
				// .num{
				// 	margin-bottom: 8rpx;
				// }

				.hot-num {
					color: #FF7101;
					position: absolute;
					right: 48rpx;

					// margin-top: -44rpx;
					image {
						width: 32rpx;
						height: 36rpx;
					}
				}

				// }
			}
		}

		.tips {
			background: rgba(115, 131, 154, 1);
			color: #fff;
			padding: 4rpx 20rpx;
			margin: 0 32rpx;
			border-radius: 6rpx;
		}

		.contents {
			margin: 0 30rpx;

			.content-item {

				.title {
					color: #333;
					line-height: 1em;
					margin: 48rpx 0 24rpx 0;
				}

				.echarts {
					background: #fff;
					z-index: 1;
				}
			}
		}

		.popup-value {
			width: 100%;
			height: 500rpx;
			position: relative;
			z-index: 999;

			// .round {
			// 	width: 12rpx;
			// 	height: 12rpx;
			// 	border-radius: 20rpx;
			// 	border: 4rpx solid #F59A23;
			// 	background: #fff;
			// 	position: absolute;
			// 	top: -80rpx;
			// 	left: -180rpx;

			// }

			.content {
				position: absolute;
				top: -232rpx;
				left: -260rpx;
				width: 540rpx;
				height: 94rpx;
				background-color: #fff;
				border-radius: 114rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.delta {
				width: 0;
				height: 0;
				border-bottom: 20rpx solid rgba(255, 0, 0, 0.0);
				border-left: 20rpx solid rgba(255, 0, 0, 0.0);
				border-right: 20rpx solid rgba(84, 255, 159, 0.0);
				border-top: 20rpx solid #fff;
				position: absolute;
				top: -144rpx;
				left: 20px;
			}
		}

	}
</style>